<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.red {
			color: red;
		}
		
		.size {
			font-size: 50px;
		}
	</style>

	<body>
		<div id="div1">
			{{msg}}
			<input type="button" @click="fnchange('白马王子')" value="修改值" />
			<p :class="{red:isred,size:issize}">我是第一段p标签</p>
			<p :class="{red:isred,size:issize}">我是第二段p标签</p>
			<p :class="[ok?'red':'size']">我是第三段p标签</p>
			<p :class="[ok1?'red':'size']">我是第三段p标签</p>
		</div>
		<div id="div2">
			{{"结果为:"+(num +10)}}
			{{ok?"yes":"not"}}
			{{value.split("").reverse().join("")}}
			<a :href="url">访问百度首页</a>
			<a :href="url1">进入首页</a>
		</div>

	</body>
	<script type="text/javascript">
		var vm2 = new Vue({
			el:"#div2",
			data:{
				num:10,
				ok:false,
				value:"hello",
				url:"http://www.baidu.com",
				url1:"https://www.baidu.com"
			}
		})
		var vm = new Vue({
			el: "#div1",
			data: {
				msg: "青蛙王子",
				isred: true,
				issize: true,
				ok: false,
				ok1:true,
			},
			methods: {
				fnchange: function(name) {
					this.msg = name
				}
			}

		})
		
	</script>

</html>